<template>
    <div class="tab-date-box d-flex a-center" :class="{ 'isinline': inline }">
        <div class="teb-box">
            <el-radio-group v-model="tabValue" v-if="type =='btn'" @input="btnTabChange()">
                <el-radio-button v-for="tabItem in tabs" :label="tabItem.value">{{tabItem.name}}</el-radio-button>
            </el-radio-group>
            <el-select v-else v-model="tabValue" style="width: 80px;" placeholder="请选择" @change="btnTabChange()">
                <el-option v-for="item in tabs" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="date-box ml-5">
            <el-date-picker v-show="tabValue =='date'" v-model="date_value" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            <el-date-picker v-show="tabValue =='week'" v-model="date_value" type="week" :picker-options="{ firstDayOfWeek: 1 }"  format="yyyy 第 WW 周" value-format="yyyy-MM-dd"></el-date-picker>
            <el-date-picker v-show="tabValue =='month'" v-model="date_value" type="month" value-format="yyyy-MM-dd" ></el-date-picker>
            <el-date-picker v-show="tabValue =='year'" v-model="date_value" type="year" value-format="yyyy-MM-dd"></el-date-picker>
            <div class="d-flex a-center" v-show="tabValue =='quarter'">
                <el-date-picker style="width: 100px" v-model="date_value" type="year" value-format="yyyy-MM-dd"></el-date-picker>
                <el-select v-model="quarter_index" style="width: 115px;margin-left: 5px;" placeholder="请选择季度" @change="selectChange('quarter')">
                    <el-option v-for="item in quarter_list" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="d-flex a-center" v-show="tabValue =='byear'">
                <el-date-picker style="width: 100px" v-model="date_value" type="year" value-format="yyyy-MM-dd"></el-date-picker>
                <el-select v-model="byear_index" style="width: 115px;margin-left: 5px;" placeholder="请选择年度"  @change="selectChange('byear')">
                    <el-option v-for="item in byear_list" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'tableDate',
        props: {
            inline:{
                type: Boolean,
                default: true
            },
            notFormat:{
                type: Boolean,
                default: false
            },
            tabs:{
                default: () => [],
            },
            type:{
                default: 'btn', // btn | list
            },
        },
        data(){
            return {
                tabValue:"",
                date_value:"",
                // week_value:"",
                // month_value:"",
                quarter_index:"",
                // quarter_value:"",
                // year_value:"",
                byear_index:"",
                byear_list:[
                    {value:1,label:"上半年"},
                    {value:2,label:"下半年"},
                ],
                quarter_list:[
                    {value:1,label:"第一季度"},
                    {value:2,label:"第二季度"},
                    {value:3,label:"第三季度"},
                    {value:4,label:"第四季度"},
                ],
                formatMap:{
                    'date':'{yyyy}-{mm}-{dd}',
                    'week':'{yyyy}-{mm}-{dd}',
                    'month':'{yyyy}-{mm}',
                    'quarter':'{yyyy}-{mm}',
                    'byear':'{yyyy}-{mm}',
                    'year':'{yyyy}',
                },
                
            }
        },
        created(){
            if(this.tabs.length > 0){
                this.tabValue = this.tabs[0].value;
            }
            this.date_value = $moment().format('{yyyy}-{mm}-{dd}')
        },
        methods: {
            btnTabChange(){
                // 2025-10-14  判断当前时间是那个季度
                let mon = new Date(this.date_value).getMonth();
                if(this.tabValue == 'quarter'){
                    let q = Math.ceil((mon+1)/3);
                    this.quarter_index = q;
                    this.selectChange('quarter');
                } else if(this.tabValue == 'byear'){
                    let q = Math.ceil((mon+1)/6);
                    this.byear_index = q;
                    this.selectChange('byear');
                }
                this.$emit('btnTabChange',this.tabValue);
            },
            selectChange(type){
                let year = this.date_value.split("-")[0];
                if(type == 'quarter'){
                    let mon = (this.quarter_index-1)*3+1;
                    if(mon<10){
                        mon = `0${mon}`;
                    }
                    this.date_value = `${year}-${mon}-01`
                } else {
                    let mon = (this.byear_index-1)*6+1;
                    if(mon<10){
                        mon = `0${mon}`;
                    }
                    this.date_value = `${year}-${mon}-01`
                }
            },
            getDateValue(){
                let startDate = "";
                let endDate = "";
                let format = this.formatMap[this.tabValue];
                if(this.notFormat){
                    format = this.formatMap['date']
                }
                if(this.tabValue == 'date'){
                    startDate = this.date_value;
                    endDate = this.date_value
                } else if(this.tabValue == 'quarter'){
                    startDate = $moment(this.date_value).format(format);
                    endDate = $moment(this.date_value).offset('month',2).endOf('month').format(format);
                } else if(this.tabValue == 'byear'){
                    startDate = $moment(this.date_value).format(format);
                    endDate = $moment(this.date_value).offset('month',5).endOf('month').format(format);
                } else{
                    startDate = $moment(this.date_value).startOf(this.tabValue).format(format);
                    endDate = $moment(this.date_value).endOf(this.tabValue).format(format);
                }
                return [startDate, endDate];

            }
        }
    }
</script>
<style scoped lang="scss">
    .tab-date-box{
        &.isinline{
            display: inline-flex;
        }
        .tab-box{

        }
        .date-box{

        }
    }
</style>